{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Plan shifts" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Plan shifts" %}</h1>
    <p>{% blocktranslate trimmed with start=monday|date:"j M" end=sunday|date:"j M Y" %}Week of {{ start }} to {{ end }}.{% endblocktranslate %}
      {% translate "Choose Day, Night or both for each person and day, then save." %}</p>
  </div>
  <div class="actions">
    <a class="btn" href="?week={{ prev_week|date:'Y-m-d' }}" aria-label="{% translate 'Previous week' %}">‹ {{ prev_week|date:"j M" }}</a>
    <a class="btn" href="?week={{ next_week|date:'Y-m-d' }}" aria-label="{% translate 'Next week' %}">{{ next_week|date:"j M" }} ›</a>
    {% if has_last_week %}
    <form method="post">{% csrf_token %}<input type="hidden" name="week" value="{{ monday|date:'Y-m-d' }}">
      <button class="btn" type="submit" name="action" value="copy">{% translate "Copy last week" %}</button></form>
    {% endif %}
  </div>
</div>

<form method="post" class="form shift-plan" novalidate>
  {% csrf_token %}
  <input type="hidden" name="week" value="{{ monday|date:'Y-m-d' }}">
  {% if form and form.errors %}<div class="form-errors">{% translate "Some details need fixing. Look for the red notes below." %}</div>{% endif %}

  <section class="panel">
    <div class="panel-head"><h2>{% translate "Shift times" %}</h2><span class="muted small">{% translate "These times apply to every week. A night shift ends the next morning." %}</span></div>
    {% if form %}
    <div class="form-grid times-grid">
      {% include "_field.html" with field=form.day_starts %}
      {% include "_field.html" with field=form.day_ends %}
      {% include "_field.html" with field=form.night_starts %}
      {% include "_field.html" with field=form.night_ends %}
    </div>
    {% else %}
    <p>{% blocktranslate trimmed with ds=times.day_starts|time:"H:i" de=times.day_ends|time:"H:i" ns=times.night_starts|time:"H:i" ne=times.night_ends|time:"H:i" %}Day shift {{ ds }}–{{ de }}, night shift {{ ns }}–{{ ne }}.{% endblocktranslate %}
      <span class="muted small">{% translate "Only administrators change these times." %}</span></p>
    {% endif %}
  </section>

  {% if matrix %}
  <div class="table-wrap">
    <table class="plan" data-plan>
      <thead>
        <tr>
          <th>{% translate "Name" %}</th>
          {% for d in days %}<th class="plan-day">{{ d|date:"D" }}<span class="muted small">{{ d|date:"j M" }}</span></th>{% endfor %}
          <th class="right">{% translate "Shifts" %}</th>
        </tr>
      </thead>
      <tbody>
      {% for row in matrix %}
        <tr data-plan-row>
          <td><span class="title">{{ row.person.display_name }}</span><span class="muted small plan-role">{{ row.person.role_label }}</span></td>
          {% for c in row.cells %}
          <td><select name="{{ c.name }}" class="plan-select v-{{ c.value|default:'none' }}" data-col="{{ forloop.counter0 }}" aria-label="{{ row.person.display_name }}, {{ c.day|date:'l j M' }}">
            <option value="">{% translate "Off" context "shift" %}</option>
            <option value="day"{% if c.value == "day" %} selected{% endif %}>{% translate "Day" context "shift" %}</option>
            <option value="night"{% if c.value == "night" %} selected{% endif %}>{% translate "Night" context "shift" %}</option>
            <option value="both"{% if c.value == "both" %} selected{% endif %}>{% translate "Both" context "shift" %}</option>
          </select></td>
          {% endfor %}
          <td class="right num" data-row-count>{{ row.count }}</td>
        </tr>
      {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <th>{% translate "On shift" %}</th>
          {% for t in totals %}<td class="small plan-total" data-col-total="{{ forloop.counter0 }}">{% translate "Day" context "shift" %} <b data-day>{{ t.day }}</b><br>{% translate "Night" context "shift" %} <b data-night>{{ t.night }}</b></td>{% endfor %}
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
  {% else %}
  <div class="panel empty"><strong>{% translate "No one to put on shifts yet." %}</strong>{% translate "Add agents and supervisors on the Team page first." %}</div>
  {% endif %}

  <div class="actions sticky-save">
    <button class="btn btn-primary" type="submit">{% translate "Save shifts" %}</button>
    <a class="btn btn-quiet" href="{{ week_url }}">{% translate "Cancel" %}</a>
  </div>
</form>
{% endblock %}